<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chart {
            width: 600px;
            height: 400px;
            outline: 1px solid red;
        }
        .aaa {
            color: #222200;
            font-size: 200px;
        }
    </style>
</head>
<body>
    <!-- <div class="aaa">yellow</div> -->
    <div id="chart"></div>
    <button>更新数据</button>

    <script src="./echarts.min.js"></script>
    <script>

        const data = [
            {
                weekday: 'mon',
                value: 150,
            },
            {
                weekday: 'tue',
                value: 134,
            },
        ];

        // 初始化图表容器
        const chartDOM = document.querySelector('#chart');
        const chart = echarts.init(chartDOM);


        // 1. x轴label的字体颜色
        // 2. 改柱的颜色
        // 配置项
        const config = {
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, 
                            color: 'skyblue', // 0% 处的颜色
                        },
                        {
                            offset: 1, 
                            color: 'blue', // 100% 处的颜色
                        },
                    ],
                },
                '#0000ff',
                '#ffff00', // yellow
            ],
            // x轴
            xAxis: {
                name: 'xxxxxxxxxxx',
                nameRotate: 30,
                // show: false,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    rotate: 45,
                },
                // nameRotate: 45,
                type: 'category',
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] >>> item >> item.weekday
                data: data.map(function (item) {
                    return item.weekday;
                }),
            },
            // y轴
            yAxis: {
                name: 'value',
                axisTick: {
                    show: true,
                },
                splitLine: {
                    show: false,
                },
                // show: false,
                type: 'value',
            },
            // 系列
            // 数组项表示的是一组数据（一根折线，一组柱图）
            series: [
                {
                    // data: [150, 230, 224, 218, 135, 147, 260], // >>> item >> item.value
                    data: data.map(function (item) {
                        return item.value;
                    }),
                    type: 'bar',
                },
            ],
        };

        // 导入配置项
        chart.setOption(config);

      	// 更新数据的函数
          function update () {
            config.series[0].data = config.series[0].data.map(function (item) {
                const n = Math.random() * 50;
                const op = Math.random() > .5 ? 1 : -1;
                return item + op * n;
            });
            chart.setOption(config);
        }

      	// 点击更新
        document.querySelector('button').addEventListener('click', update);

        const arr = [1, 2, 3, 4];
        
        // [1, 4, 9, 16]
        const newArr = arr.map(function (item) {
            return Math.pow(item, 2);
            // return item ** 2;
            // return item * item;
        });

    </script>
</body>
</html>
